<template>
    <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
        <Row :gutter="24" type="flex" justify="end">
            <Col v-bind="grid">
                <FormItem label="角色名称：" prop="roleName" label-for="roleName">
                    <Input v-model="data.roleName"  placeholder="请输入角色名称" element-id="roleName" />
                </FormItem>
            </Col>
            <Col v-bind="grid">
                <FormItem label="角色编码：" prop="roleCode" label-for="roleCode">
                    <Input v-model="data.roleCode" maxlength="11" placeholder="角色编码" element-id="roleCode" />
                </FormItem>
            </Col>
            <Col v-bind="grid" class="ivu-text-right">
                <FormItem>
                    <Button type="primary" @click="handleSubmit">查询</Button>
                    <Button class="ivu-ml-8" @click="handleReset">重置</Button>
                </FormItem>
            </Col>
        </Row>
    </Form>
</template>
<script>
import { mapState } from 'vuex';
export default {
    data () {
        return {
            grid: {
                xl: 8,
                lg: 8,
                md: 12,
                sm: 24,
                xs: 24
            },
            data: {
                roleName: '',
                roleCode: '',
            },
            rules: {
            },
        }
    },
    computed: {
        labelWidth () {
            return  100;
        },
        labelPosition () {
            return 'right';
        }
    },
    methods: {
        handleSubmit () {
            this.$emit('on-submit', this.data);
        },
        handleReset () {
            this.$refs.form.resetFields();
            this.$emit('on-reset');
        }
    }
}
</script>
